<template>
  <div class="setusername">
    <!-- 返回 -->
    <top-back>
      <template v-slot:back>更改用户名</template>
      <template v-slot:save>
        <div @click="update">保存</div>
      </template>
    </top-back>

    <input type="text" v-model="user.username" />
  </div>
</template>

<script>
import { Toast } from 'vant'
import TopBack from '@/components/Mine/TopBack'

export default {
  name: 'SetUsername',
  components: { TopBack },
  data () {
    return {
      user: {}
    }
  },
  created () {
    this.user = this.$store.getters.user
  },
  methods: {
    update () {
      this.$store.dispatch('setName', this.user.username)
      Toast('修改成功')
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.setusername {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  input {
    width: 100%;
    height: 50px;
    padding-left: 20px;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    outline: none;
    box-sizing: border-box;
  }
}
</style>
